<template>
  <div class="newsFu">
    <div class="top">
      <span class="title">有品秒杀</span>
      <span class="more">更多&gt;</span>
    </div>
    <div class="shoppings">
        <div class="item">
            <img src="img/news0.png">
            <span>米家跨界烟灶套装</span>
        </div>
        <div class="item">
            <img src="img/news1.png">
            <span>乐歌办公升降台</span>
        </div>
        <div class="item">
            <img src="img/news2.png">
            <span>空气净化器4 Lite</span>
        </div>
        <div class="item">
            <img src="img/news3.png">
            <span>小霸王摇杆游戏机</span>
        </div>
        <div class="item">
            <img src="img/news4.png">
            <span>扫拖机器人2Pro</span>
        </div>
        <div class="item">
            <img src="img/news5.png">
            <span>米物三模机械键盘</span>
        </div>
        <div class="item">
            <img src="img/news6.png">
            <span>真皮中帮马丁靴</span>
        </div>
        <div class="item">
            <img src="img/news7.png">
            <span>悠伴可视空气炸锅</span>
        </div>
        <div class="item">
            <img src="img/news8.png">
            <span>大师系列精粹香水</span>
        </div>
        <div class="item">
            <img src="img/news9.png">
            <span>星特朗近焦望远镜</span>
        </div>
        <div class="item">
            <img src="img/news10.png">
            <span>关捷健氨糖软骨素</span>
        </div>
    </div>
  </div>
  
</template>

<script>
export default {};
</script>

<style scoped>
.newsFu {
  box-sizing: border-box;
  width: 3.5rem;
  height: 1.78rem;
  border-radius: 0.06rem;
  overflow: hidden;
  margin-left: 0.14rem;
}
.top {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  flex-shrink: 0;
  width: 3.5rem;
  height: 0.43rem;
  justify-content: space-between;
}
.top .title{
    box-sizing: border-box;
    display: block;
    flex-direction: row;
    align-content: flex-start;
    font-size: 0.18rem;
    line-height: 0.25rem;
    font-weight: bold;
    color: rgb(51, 51, 51);
    margin: 0.12rem 0.08rem;
}
.top .more{
    box-sizing: border-box;
    display: block;
    flex-direction: column;
    align-content: flex-start;
    font-size: 0.12rem;
    width: 0.5rem;
    line-height: 45px;
    color: rgb(153, 153, 153);
    padding-right: 0.02rem;
}
.shoppings{
    border: 0px solid black;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex: 1 1 0%;
    width: 351px;
    height: 145px;
    overflow: scroll;
}
.item{
   width: 93px;
   height: 93px;
   margin-right:3px;
}
.item img{
    width: 93px;
    height: 93px;
}
.item span{
    position: relative;
    box-sizing: border-box;
    display: -webkit-box;
    flex-direction: column;
    align-content: flex-start;
    flex-shrink: 0;
    font-size: 11px;
    width: 79px;
    margin-left: 7px;
    margin-top: -22px;
    text-align: center;
    text-overflow: ellipsis;
    color: rgb(51, 51, 51);
    overflow: hidden;
}
::-webkit-scrollbar{
  width: 0;
}
</style>